<template>
  <div ref="threeRef" class="threeRef"></div>
</template>

<script lang="ts">
import { reactive, toRefs, ref, onMounted } from "vue";
import Manager3D from "./core/Manager3D";
export default {
  computed: {
    name() {
      return this.$store.state.name;
    }
  },
  setup() {
    const state = reactive({
      threeRef: ref<HTMLElement>(),
    });
    const methods = {
      init() {
        new Manager3D(state.threeRef as HTMLElement);
      },
    };
    onMounted(() => {
      methods.init();
    });
    return {
      ...toRefs(state),
    };
  },
};
</script>

<style lang="scss" scoped>
.threeRef {
  height: 100vh;
}
</style>